<template>
	<div class="login" style="height:100vh;background: url('https://test91.91haoka.cn/web%201922.png') no-repeat; background-size: cover;">
		<!-- <vue-particles color="#dedede"></vue-particles> -->
		<div class="con">
			<div class="center2">
        <div style="display: flex; justify-content: center; align-items: center;">
          <img src="https://test91.91haoka.cn/gantanhaobushu1.png" style=" width: 340px; cursor: pointer;">
        </div>

				<!-- <div class="img" style="overflow: hidden;"><img :src="moban2.login_logo" style="max-width: 100% !important; max-height: 100% !important;"></div> -->
				<div class="alt" style="width: 400px;">
          <div style="margin-top: 30px;">
            <el-input v-model="login.user" placeholder="请输入用户名"></el-input>
          </div>
          <div style="margin-top: 30px;">
            <el-input v-model="login.pass" placeholder="请输入密码" show-password></el-input>
          </div>

					<div class="flex" style="justify-content: space-between;">
						<div>
							<el-checkbox v-model="remember">记住密码</el-checkbox>
						</div>
						<div style="color: #1989FA; cursor: pointer; font-size: 14px; top: 2px; position: relative;" @click="gonoremeber">忘记密码</div>
					</div>
          <div>
            <el-button type="primary" @click="logingo">登录</el-button>
          </div>
          <!-- <div>
            <el-button @click="logingo">联系客服</el-button>
          </div> -->

					<!-- <div class="gologin"  v-if="moban2.platform_name == '敢探号'">还未开店？<router-link to="/register">注册店铺</router-link>
					</div> -->

<!--         <div style="text-align: center; padding-top: 50px; color: #2673F9;">
            <el-popover placement="bottom" trigger="hover">
                <div style="text-align: center;">
                  <div>微信扫码咨询{{moban2.platform_name}}客服</div>
                  <div><img :src="moban2.customer" style="width: 314px;"></div>

                  <div>客服在线时间：工作日8:30-17:00</div>
                </div>
                <div slot="reference">
                  <div style=" text-align: center; cursor: pointer;">
                    <div style="font-size: 14px;">联系客服</div>
                  </div>
                </div>
            </el-popover>
          </div> -->
				</div>
			</div>
<!-- 			<div style="text-align: center; margin-top: 40px;">

        <div style="width:600px;margin:0 auto; padding:20px 0;">
             <a target="_blank" href="https://beian.miit.gov.cn/" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
               <img src="../assets/beian.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">{{moban2.filing}}</p>
             </a>
        </div>
			</div> -->
		</div>
		<el-dialog title="完善信息提示" :visible.sync="tixing" width="600px" :close-on-click-modal="false" :close-on-press-escape="false"
		 :show-close="true">
			<div>为了让您的分销商供应商更好的联系到您，亲完善您的信息</div>
			<div class="flex">
				<div class="l1"><span class="red">*</span>联系电话：</div>
				<div class="l2">
					<el-input v-model="mobile" placeholder="请输入联系电话"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="l1"><span class="red">*</span>负责人：</div>
				<div class="l2">
					<el-input v-model="real_name" placeholder="请输入负责人"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="l1">公司名称：</div>
				<div class="l2">
					<el-input v-model="com" placeholder="请输入公司名称"></el-input>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="quxiao">取消</el-button>
				<el-button type="primary" @click="baocun">确认保存</el-button>
			</span>
		</el-dialog>
		<el-dialog :visible.sync="tishilog" width="930px" :show-close="false" :close-on-click-modal="false"
		 :close-on-press-escape="false">

			<div style="background: #FF0000; text-align: center; color: #FFFFFF; font-size: 20px; padding: 20px 0;">重要提醒</div>
			<div style="padding: 100px 60px;">
				<div style="font-size: 18px; font-weight: bold; margin-bottom: 15px;">告{{moban2.platform_name}}各位商家：</div>
				<div style="font-size: 16px; line-height: 30px;">
					<div> 近期{{moban2.platform_name}}平台多次遭到攻击，对大家的业务造成了影响，为了应对该问题我们现决定<span style="margin: 0 20px; color: #ff0000;">更换登录地址</span>（域名），本次地址更换将影响您的以下业务：</div>
					<div>1、{{moban2.platform_name}}登录地址：您将需要在新的地址登录 </div>
					<div>2、H5页面的推广地址：如果您有使用{{moban2.platform_name}}的H5页面做抖音等信息流推广，请留意及时更换推广地址，方法：请在新地址登录后前往“商品管理页”复制新的链接去参与推广。</div>
					<div>3、已对接我们系统API接口的商家，请及时更换域名。</div>
					<div>{{moban2.platform_name}}新的登录地址：<span style="margin: 0 20px; color: #0066FF;">https://gantanhao.vip</span>请收藏。</div>
					<div>注：本次更改后，新老地址将会同时有效一段时间，截止本月30日，您可在此期间做好过度准备。</div>

				</div>
				<div style="width: 150px; text-align: center; margin: 50px auto; margin-bottom: 0; color: #FFFFFF; background: #FF0000; padding: 15px;"
				 :disabled="tiao" @click="gogogo">我已知晓</div>
			</div>

		</el-dialog>
    <el-dialog :visible.sync="logs" width="600px"  :close-on-click-modal="false" :close-on-press-escape="false">
      <div style="padding: 20px 40px; font-size: 16px;">当前账号名含违规字段"{{moban2.platform_name}}、感叹号"，已暂停服务，请联系客服修改账号名后立刻开通</div>
      <div style="padding: 20px 40px; font-size: 16px;">客服二维码：</div>
      <div>
        <img src="../assets/kefuerweima.jpg" style="width: 100%;">
      </div>
    </el-dialog>

    <el-dialog class="zidingyilog" :visible.sync="mimalog" :show-close='false' center width="630px"  :close-on-click-modal="false" :close-on-press-escape="false">
      <div>
        <div class="kflexcc" style="background: rgb(0, 79, 255); height: 40px; color: #FFFFFF; font-size: 18px; font-weight: bold;">
          <img src="../assets/beian.png" style="margin-right: 10px;" />
          弱口令整改
        </div>
        <div style="font-size: 14px; margin: 40px 0 40px; text-align: center;">
          应网络公安针对网络账号弱口令的整改要求，您的密码不符合要求请前往修改
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
      	<el-button type="primary" @click="jinru">前往修改</el-button>
      </span>
    </el-dialog>

	<el-dialog
		title=""
		:show-close="false"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:visible.sync="isshowsm"
		width="800px">
		<div style="background-color: #FF5151;text-align: center;font-size: 20px;padding: 10px 0;color: white;">
				商家店铺实名公告
		</div>
		<div style="padding: 50px;">
			<div style="font-size: 14px;color: #575757;font-weight: bold;margin-bottom: 20px;" >
				尊敬的{{moban2.platform_name}}商家：
			</div>
			<div style="font-size: 14px;color: #FF3B3B;margin-bottom: 20px;">
				您的店铺因未实名已停用，请点击"前往实名"按钮（使用主账号操作）实名启用
			</div>
			<div style="font-size: 14px;margin-bottom: 20px;">
				为了更好的维护{{moban2.platform_name}}商家共有的诚信营商环境，保障商家基本权益，现推行店铺实名制
			</div>
			<!-- <div style="font-size: 14px;color: #575757;font-weight: bold;margin-bottom: 20px;">
				特别说明：您的实名信息{{moban2.wenzi}}将会严密保存，除了国家执法部门根据规程提出相关要求出示之外我们将不会透露给任何第三方。
			</div> -->
			<div style="text-align: center;">
				<el-button type="danger" @click="smfunc">前往实名</el-button>
			</div>
		</div>


	</el-dialog>
	</div>
</template>
<script>
	import axios from 'axios'
	export default {
		data() {
			return {
        logs:false,
				tishilog: false,
				tiao: false,
				login: {
					user: '',
					pass: ''
				},
				remember: false,
				h: "",
				tixing: false,
				user_func: "",
				routeName: "",
				mobile: "",
				real_name: "",
				com: "",
				id: "",
				isshowsm:false,
				ismaincode:false,
        moban2:"",
        mimalog:false

			}
		},
    beforeDestroy() {
      document.onkeydown = ""
    },
    beforeCreate() {
      localStorage.removeItem('moban')
    },
		created() {
			var that = this
			document.onkeydown = function(e) {
				var ev = document.all ? window.event : e;
				if (ev.keyCode == 13) {
					that.logingo()
				}
			}

			//左边导航高度
			var h = document.documentElement.clientHeight;
			this.h = h;

			if (localStorage.getItem('luser')) {
				this.login.user = localStorage.getItem('luser')
			}
			if (localStorage.getItem('lpass')) {
				this.login.pass = localStorage.getItem('lpass')
			}
			if (localStorage.getItem('luser') && localStorage.getItem('lpass')) {
				this.remember = true
			}

			localStorage.removeItem('rush')


		},
    mounted() {
      if(this.moben2){

      }else{
        let p = setInterval(()=>{
          if(this.moban){
            this.moban2 = this.moban
            clearInterval(p)
          }
        },500)
      }
    },
		methods: {

			gonoremeber: function() {
				this.$router.push('/noremember')
			},
			gogogo: function() {
				this.go()
			},
			go: function() {
				if (this.user_func.length > 0) {
					for (var i in this.user_func) {
						var func_number = this.user_func[i] ? this.user_func[i].code : ''

						if (func_number.indexOf("A") >= 0) {
							this.routeName = '/mySupplier'
							break
						} //我的供应商
						if (func_number.indexOf("B") >= 0) {
							this.routeName = '/myDistributor'
							break
						} //我的分销商
						if (func_number.indexOf("C") >= 0) {
							this.routeName = '/productionDelivery'
							break
						} //产品管理中心
						if (func_number.indexOf("I") >= 0) {
							this.routeName = '/order_question'
							break
						} //订单管理
						if (func_number.indexOf("D") >= 0) {
							this.routeName = '/order_catch/order_catchjd'
							break
						} //生产管理
						if (func_number.indexOf("L") >= 0) {
							this.routeName = '/dataExcel/dataReport'
							break
						} //数据报表

						if (func_number.indexOf("J01") >= 0) {
							this.routeName = '/finance/onlinecommission'
							break
						} //收入管理
						if (func_number.indexOf("J02") >= 0) {
							this.routeName = '/finance/zhichu'
							break
						} //核算支出
						if (func_number.indexOf("J04") >= 0) {
							this.routeName = '/finance/financenumber'
							break
						} //返利管理

						if (func_number.indexOf("H") >= 0) {
							this.routeName = '/message'
							break
						} //消息通知
						if (func_number.indexOf("K") >= 0) {
							this.routeName = '/callsystem/taskCenter'
							break
						} //我的账户
					}
				} else {
					this.routeName = '/personalCenter'
				}
				this.$router.push({
					path: this.routeName
				});
			},
			baocun: function() {
				var that = this
				var obj = {}
				obj['mobile'] = this.mobile
				obj['real_name'] = this.real_name
				obj['com'] = this.com
				axios.post('/api/plan-market/user/info', obj)
					.then(response => {
						if (response.data.msg.code == 0) {
							that.go()
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			quxiao: function() {
				this.go()
			},

      //登录后 验证是否实名
      check2:function(){
        return new Promise((res,rej)=>{
          axios.get('/api/gth/shop/identify/check')
          .then(response2 => {
            if (response2.data.msg.code == 0) {
              if(response2.data.data == null){
                //提示去实名
                // this.$confirm('您的店铺未实名认证，是否前往实名认证？', '提示', {
                //   confirmButtonText: '去实名',
                //   cancelButtonText: '取消',
                //   type: 'warning'
                // }).then(() => {
                //     this.$router.push('/shimingrenzheng')
                //     return false
                // }).catch(() => {
                //     res('ok')
                // });
                // res('ok')
              }else{
                if(response2.data.data.status == -1){
                  this.$router.push('/shimingrenzhenging?status=-1')
                  return false
                }
                if(response2.data.data.status == -2){
                  this.$router.push('/shimingrenzhenging?status=-2&reason='+response2.data.data.reason)
                  return false
                }
                res('ok')
              }


            } else {
            	this.$message.error(response2.data.msg.info);
            }
          })
        })

      },
      jinru:function(){
        this.$router.push("/personalCenter")
      },
      //登录后获取店铺信息前往页面
      go2:function(){
        const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
        axios.get('/api/gth/user/shop')
        	.then(response => {
        		if (response.data.msg.code == 0) {
        			localStorage.setItem('SHOP', JSON.stringify(response.data.data));
        			this.tiao = true
        			if (response.data.data.shop_id == this.id) {
        				if(!passwordPattern.test(this.login.pass)){
        				  this.mimalog = true
        				}else{
        				  this.$router.push("/myDistributor")
        				}
        			} else {
        				// this.go()
                if(!passwordPattern.test(this.login.pass)){
                  this.mimalog = true
                }else{
                  this.$router.push("/myDistributor")
                }
        			}
        		} else {
        			this.$message.error(response.data.msg.info);
        		}
        	})
      },

			logingo: function() {
				let urlname = this.$route.name
				if (urlname != 'login') {
					return
				}
				if (this.remember == true) {
					localStorage.setItem('luser', this.login.user);
					localStorage.setItem('lpass', this.login.pass);
				} else {
					localStorage.removeItem('luser');
					localStorage.removeItem('lpass');
				}
				var that = this
				axios.post('/api/plan-market/shop/login', {
					name: this.login.user,
					password: this.login.pass,
				}).then(function(response) {
					if (response.data.msg.code == 0) {
						//保存个人信息
						localStorage.setItem('USER', JSON.stringify(response.data.data));
						that.user_func = response.data.data.functions
						that.routeName = ''

						that.real_name = response.data.data.real_name
						that.mobile = response.data.data.mobile
						that.com = response.data.data.com
						that.id = response.data.data.id

						//标记登录后可以展示认证弹窗
						localStorage.setItem('canshow', 1);

						if(response.data.data.status == 5){
							// that.$router.push('/shimingrenzheng')

							 //验证登陆
							axios.get("/api/auth/me")
								.then(function(response) {
								if (response.data.msg.code == 0) {



									axios.get('/api/gth/user/shop')
									.then(response2 => {
										if (response2.data.msg.code == 0) {
											 response2.data.data.shop_id
											 console.log('dddd---ddd')
											 console.log(response.data.data.id,response2.data.data.shop_id)
											 //判断是否为主账号
											if(response.data.data.id==response2.data.data.shop_id*1){
												that.ismaincode = true
											}else{
												that.ismaincode = false
											}
										}
									})
                  .catch(err=>{
                    console.log(err)
                  })


								}
								})
                .catch(err=>{
                  console.log(err)
                })



							that.isshowsm = true
							return false
						}
						if(response.data.data.status == 0){
							that.go2()
							return false
						}

						let p = that.check2()
						p.then(()=>{
							that.go2()
						})


						// that.tishilog = true



					} else {
						if(response.data.msg.code == 51213){
							that.logs = true
						}else{
							that.$message.error(response.data.msg.info);
						}

					}
				})
        .catch(err=>{
          that.$message.error('触发安全策略，请于1分钟后登录');
        })
			},
			//实名跳转
			smfunc(){
				// this.$router.push('/shimingrenzheng')
				if(this.ismaincode){
				  this.$router.push('/shimingrenzheng')
				}else{
					this.$message.error('请使用主账号操作实名');
					this.isshowsm = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
  /deep/ .el-input__inner{ background: #E3E8F1; border: 0;  padding: 30px 20px;}
  /deep/ .el-button {
  	width: 100%;
  	margin-top: 30px;
    padding: 20px; margin-top: 30px;
  }
	.login .el-dialog__header {
		padding: 0;
	}

	.login .el-dialog__body {
		padding: 0;
	}

	.login {

		.flex {
			display: flex;
			margin-top: 20px
		}

		.l1 {
			width: 100px;
			line-height: 40px;
		}

		.l2 {
			width: 300px;
		}

		.red {
			color: #FF0000
		}

		#particles-js {
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 9
		}

		.con {
      position: fixed; right: 140px; top:140px;
			width: 578px; height: 798px;
			z-index: 10;
      box-shadow: 0px 0px 5px #d0d0d0;
      border-radius: 5px;
      background: #FFFFFF;
      overflow: hidden;
      padding: 70px 90px;
      box-sizing: border-box;

			.center2 {







				.alt {



					.title {
						font-size: 22px;
						color: #EEF7FF;
					}





					.gologin {
						text-align: center;
						margin-top: 20px;

						a {
							color: #2673F9
						}
					}
				}
			}
		}
	}
</style>
